<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { NTabs, NTabPane, NScrollbar } from 'naive-ui'
import { Close } from '@vicons/ionicons5'
import { appWindow } from '@tauri-apps/api/window'
import { invoke } from '@tauri-apps/api'
import { listen } from '@tauri-apps/api/event'
import CrossSetting from './components/cross.vue'
import HugSetting from './components/hug.vue'
import Tools from './components/tools.vue'

const messages = ref<string[]>([])

function hide() {
  appWindow.hide()
}
onMounted(() => {
  // invoke('toggle_deltool')
  // 监听错误
  listen('message', evt => {
    const message = (new Date()).toLocaleTimeString() + ': ' + evt.payload
    messages.value = [...messages.value, message].slice(-200)
  })
})
</script>

<template>
  <div class="main-win" @contextmenu.prevent>
    <div class="win-header" data-tauri-drag-region>
      <Close @click="hide" />
    </div>
    <n-tabs type="line" animated>
      <n-tab-pane tab="日志" name="log">
        <n-scrollbar>
          <div class="messages">
            <div class="message" v-for="(msg, i) of messages" :key="msg + i">{{ msg }}</div>
          </div>
        </n-scrollbar>
      </n-tab-pane>
      <n-tab-pane tab="准星设置" name="cross-setting">
        <CrossSetting />
      </n-tab-pane>
      <n-tab-pane tab="练体设置" name="hug-setting">
        <HugSetting />
      </n-tab-pane>
      <n-tab-pane tab="小工具" name="tools">
        <Tools />
      </n-tab-pane>
    </n-tabs>
  </div>
</template>

<style scoped lang="less">
.main-win {
  position: relative;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border: 1px solid #343434;
  .win-header {
    height: 32px;
    background-color: #333;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 5px;
    svg {
      width: 22px;
      cursor: pointer;
      color: var(--error-color);
    }
  }

  .n-tabs {
    flex-grow: 1;
    overflow: hidden;
    :deep(.n-tabs-nav) {
      .n-tabs-nav-scroll-content {
        padding-left: 12px;
      }
      .n-tabs-bar {
        margin-left: 12px;
      }
    }
    :deep(.n-tabs-pane-wrapper) {
      height: calc(100% - 42px);
      .n-tab-pane {
        height: 100%;
        box-sizing: border-box;
      }
    }
  }
  .messages {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 5px 15px;
    opacity: 0.75;
  }
}
</style>
